* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
html,body {
  height: 100%;
  width: 100%;
} 
img{
  width: 100%;
}
.box {
  position: relative;
  margin: 150px auto;
  width: 400px;
  height: 400px;
}

.box>.smallBox,.box>.bigBox  {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  min-width: 300px;
}
.box>.smallBox>.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, .5);
}
.box>.smallBox>img {
  width: 100%;
}

.box>.bigBox {
  /* display: none; */
  position: absolute;
  top: 0;
  left: 400px;
  overflow: hidden;
}

.box>.bigBox>img {
  width: 200%;
}
.imgs{
  width: 400px;
  display: flex;
  justify-content: space-between;
}
.box>.imgbox>.imgs>li{
  box-sizing: border-box;
  width: 90px;
  height: 100px;
  /* border: 1px solid #000; */
}
.noactive{
  border: 1px solid #fff;
}
.active{
  border: 1px solid #000;
}